<template>
  <div class="app-container">
    <el-button size="mini" type="primary" @click="handleAdd">增 加</el-button>
    <el-table :data="itemList" :row-class-name="tableRowClassName">
      <!--  <el-table-column label="ID" align="center" prop="beiId" />
        <el-table-column label="主表主键ID" align="center" prop="purchaseId" />-->
      <el-table-column label="货品" align="center" prop="proId" >
        <template slot-scope="scope">
            <span v-if="scope.row.proId==item.proId"
                  v-for="item in ProductList"
                  :key="item.proId"
                  :label="item.proName"
                  :value="item.proId">
                  {{item.proName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="数量" align="center" prop="beiNum" />
      <el-table-column label="单价" align="center" prop="beiPrice" />
      <el-table-column label="金额" align="center" prop="beiMoney" />
      <!--<el-table-column label="备注" align="center" prop="beiRemark" />-->
      <el-table-column label="建议厂家" align="center" prop="beiJycj" />
      <el-table-column label="期限(天)" align="center" prop="beiDaynum" />
      <el-table-column label="付款类型" align="center" prop="beiFktype">
        <template slot-scope="scope">
          <span v-if="scope.row.beiFktype==item.dictValue" v-for="item in FuKuanType"
                :key="item.dictCode"
                :value="item.dictValue"
                :label="item.dictLabel">
             {{item.dictLabel}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="税率" align="center" prop="beiShuilv" />
      <el-table-column label="有无合同" align="center" prop="beiIsht" />
      <el-table-column label="合同签订人" align="center" prop="beiHtname" />
      <el-table-column label="合同编号" align="center" prop="beiHtcode" />
      <el-table-column label="合同交货时间" align="center" prop="beiJhtime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.beiJhtime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center"  width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.$index, itemList)"
            v-hasPermi="['system:item:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, itemList)"
            v-hasPermi="['system:item:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改采购申请明细对话框 -->
    <MyDialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-top: 10px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="货品" prop="proId">
              <el-select v-model="form.proId" filterable clearable>
                <el-option v-for="item in ProductList"
                           :key="item.proId"
                           :label="item.proName"
                           :value="item.proId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="数量" prop="beiNum">
              <el-input v-model="form.beiNum" placeholder="请输入数量" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单价(元)" prop="beiPrice">
              <el-input v-model="form.beiPrice" placeholder="请输入单价" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="金额(元)" prop="beiMoney">
              <el-input v-model="form.beiMoney" placeholder="请输入金额" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="税率(%)" prop="beiShuilv">
              <el-input v-model="form.beiShuilv" placeholder="请输入税率" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="建议厂家" prop="beiJycj">
              <el-input v-model="form.beiJycj" placeholder="请输入建议厂家" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="期限(天)" prop="beiDaynum">
              <el-input v-model.number="form.beiDaynum" placeholder="请输入采购期限-天" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="付款类型" prop="beiFktype">
              <el-select v-model="form.beiFktype" placeholder="请选择付款类型" filterable >
                <el-option v-for="item in FuKuanType"
                           :key="item.dictCode"
                           :value="item.dictValue"
                           :label="item.dictLabel">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
            <el-form-item label="有无合同" prop="beiIsht">
              <el-radio v-model="form.beiIsht" :label = 1 >有</el-radio>
              <el-radio v-model="form.beiIsht" :label = 0 >无</el-radio>
            </el-form-item>
        <el-row>
          <el-col :span="6">
            <el-form-item label="合同编号" prop="beiHtcode">
              <el-input v-model="form.beiHtcode" placeholder="请输入合同编号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="签订人" prop="beiHtname">
              <el-input v-model="form.beiHtname" placeholder="请输入合同签订人" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="交货时间" prop="beiJhtime">
              <el-date-picker clearable size="medium" style="width: 195px"
                              v-model="form.beiJhtime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择合同交货时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注" prop="beiRemark">
          <el-input type="textarea"
                    :rows="2"
                    v-model="form.beiRemark"
                    placeholder="请输入备注" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm()">确 定</el-button>
        <el-button @click="cancel('form')">取 消</el-button>
      </div>
    </MyDialog>
  </div>
</template>

<script>
  import { listItem, getItem, delItem, addItem, updateItem, exportItem } from "@/api/sparepart/purchaseitem";
  import {listProducts} from '@/api/sparepart/products'
  export default {
    name: "Item",
    components: {
    },
    props:["beiPurchaseItems"],
    data() {
      return {
        //付款类型
        FuKuanType:[],
        //货品列表
        ProductList:[],
        // 选中数组
        ids: [],
        // 采购申请明细表格数据
        itemList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {
          beiId: null,
          purchaseId: null,
          proId: null,
          beiNum: null,
          beiPrice: null,
          beiMoney: null,
          beiRemark: null,
          beiJycj: null,
          beiDaynum: null,
          beiFktype: null,
          beiShuilv: null,
          beiIsht: 1,
          beiHtname: null,
          beiHtcode: null,
          beiJhtime: null,
          status: 0
        },
        // 表单校验
        rules: {
          beiNum: [
            {
              required: true,
              message: "请输入数量",
              trigger: "blur"
            },
            {
              pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,3})?$/,
              message: "数量必须保留三位小数",
              trigger: "blur"
            }
          ],
          beiPrice: [
            {
              required: true,
              message: "单价不能为空",
              trigger: "blur"
            },
            {
              pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
              message: "单价必须保留两位小数",
              trigger: "blur"
            },
,          ],
          beiMoney: [
            {
              required: true,
              message: "金额不能为空",
              trigger: "blur"
            },
            {
              pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
              message: "金额必须保留两位小数",
              trigger: "blur"
            }
,          ],
          beiShuilv: [
            {
              required: true,
              message: "税率不能为空",
              trigger: "blur"
            },
            {
              pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
              message: "税率必须保留两位小数",
              trigger: "blur"
            }
           ],
          beiDaynum: [
            { required: true, message: '期限不能为空',trigger: "blur"},
            { type: 'number', message: '期限必须为数字值',trigger: "blur"}
          ],
        }
      };
    },
    created() {
      this.getDicts("FuKuanType").then(response => {
        this.FuKuanType = response.data;
      });
      listProducts().then(res=> {
        this.ProductList = res.rows
      })
    },
    methods: {

      // 取消按钮
      cancel(formName) {
        this.open = false;
        this.$refs[formName].resetFields();

      },
      // 表单重置
      reset() {
        this.form = {
          beiId: null,
          purchaseId: null,
          proId: null,
          beiNum: null,
          beiPrice: null,
          beiMoney: null,
          beiRemark: null,
          beiJycj: null,
          beiDaynum: null,
          beiFktype: null,
          beiShuilv: null,
          beiIsht: 1,
          beiHtname: null,
          beiHtcode: null,
          beiJhtime: null,
          status: 0
        };
      },
      /** 新增按钮操作 */
      handleAdd() {
          this.reset()
          this.open = true;
          this.title = "添加采购申请明细";
      },
      /** 修改按钮操作 */
      handleUpdate(index,row) {
          this.form = row[index]
          this.form.id = index
          this.open=true
      },
      /** 提交按钮 */
      submitForm() {
        //索引
        const id = this.form.id
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (id!=null){
              this.itemList[id] = this.form
              this.open = false;
              this.reset()
            }else {
              this.itemList.push(this.form)
              this.open = false;
              this.reset()
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(index,row) {
        row.status = 1
      },
      tableRowClassName({row, rowIndex}) {
        if (row.status == 1 ) {
          console.log("...")
          return 'warning-row';
        }
        return '';
      },
    },
    watch:{
      itemList(newValue,oldValue){
        this.$emit("update:beiPurchaseItems",newValue)
      },
      beiPurchaseItems(newValue,oldValue){
        this.itemList = newValue
      }

    }
  };
</script>
<style>
  .el-table .warning-row {
    display:none;
  }
</style>
